<template>
  <div id="swiper">
    <el-carousel indicator-position="outside">
      <el-carousel-item v-for="item in banners" :key="item.imgPath">
          <img :src="item.imgPath" alt="">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  name: "swiper",
  //组件
  components: {},
  //数据
  data() {
    return {
        banners : []
    };
  },
  //挂载后
  mounted() {
      this.$http.get('banners.json').then(res=>{
          this.banners = res.data.data
      })
  },
  //方法
  methods: {},
  //过滤，筛选
  filters: {},
  //计算
  computed: {},
  //监听
  watch: {
    //被监听者名称
    $route: {
      //是否一进入页面就开始监听
      immediate: false,
      //执行函数
      handler(newVal, oldVal) {},
      //是否深度监听
      deep: false,
    },
  },
};
</script>

<style lang='scss' >
.el-carousel__arrow--left{
    left : 244px !important;
}
.el-carousel__container{
    height: 460px !important;
    img{
        width: 100%;
        height: 100%;
    }
}
</style>
